<template>
  <!-- 博客列表模块 -->
  <!-- 实现下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list 
        v-model="loading"
        :finished="finished"
        finished-text="持续更新中...."
        @load="onLoad">
      <el-row>
        <el-col :span="6" v-for="(item, index) in blogsList1" :key="index" :offset="index > 0 ? 3 : 0">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img :src="require('@/assets/album_sharelist/' + item.img)" class="image">
            <div style="padding: 7px;">
              <span style="font-size: 20px;">{{item.title}}</span>
              <div class="bottom clearfix">
                <span class="time">{{ item.data}}</span>
                <el-button type="text" class="button" @click.native="itemClick(index)">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6" v-for="(item, index) in blogsList2" :key="index" :offset="index > 0 ? 3 : 0">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img :src="require('@/assets/album_sharelist/' + item.img)" class="image">
            <div style="padding: 7px;">
              <span style="font-size: 20px;">{{item.title}}</span>
              <div class="bottom clearfix">
                <span class="time">{{ item.data}}</span>
                <el-button type="text" class="button" @click.native="itemClick(index)">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </van-list>
</van-pull-refresh>
</template>

<script >
  import list from "vant";
export default {
  name: "BlogList",
  data() {
    return {
      blogsList1: [],
      blogsList2: [],
      loading: true,
      finished: true,
      refreshing: false,
      page: 0,
    };
  },
  created() {
    // 获取本地博客数据
    this.axios.get("/data/blogs.json").then((res) => {
      this.blogsList1 = res.data.blogs;
      // 测试是否获取到本地数据
      console.log(this.blogsList);
    });
    this.axios.get("/data/blogs2.json").then((res) => {
      this.blogsList2 = res.data.blogs;
      // 测试是否获取到本地数据
      console.log(this.blogsList);
    });
  },
  methods: {
    // 加载函数
    onLoad() {
      // 因为使用本地数据，用settimeout实现简单加载效果
      setTimeout(() => {
        // 判断数据是否刷新
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
          this.page = 0;
        }
        // 每次加载10条数据，剩余数据少于10条就结束加载
        if (this.blogsList.length - this.list.length >= 10) {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.blogsList[this.page * 10 + i]);
          }
          this.loading = false;
        } else {
          let n = this.blogsList.length - this.list.length;
          for (let i = 0; i < n; i++) {
            this.list.push(this.blogsList[this.page * 10 + i]);
          }
          this.loading = false;
          this.finished = true;
        }
        this.page += 1;
      }, 1000);
    },
    // 刷新函数
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 点击博客列表，跳转到博客详情页面
    itemClick(id) {
      // 测试点击是否有效
      console.log(`博客id：${id}`);
      // 页面跳转并传值
      this.$router.push({
        path: `/detail?id=${id}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
  div.el-row{
    margin-bottom: 20px;
    cursor: pointer;
  }
 .time {
    font-size: 6px;
    color: rgb(137, 133, 133);
  }
  
  .bottom {
    margin-top: 7px;
    line-height: 8px;
  }

  .button {
    font-size: large;
    width: 30px;
    height: 10px;
    color: rgb(31, 31, 32);
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  
</style>